<template>
    <div class="w-full">
        <a-select @change="inputVal" mode="multiple" allowClear class="w-full" v-model:value="value" show-search :placeholder="props.placeholder" :options="options" :filter-option="filterOption" :allowClear="props.allowClear"></a-select>
    </div>
</template>
<script setup>
const emits = defineEmits(['update:value', 'change'])
const props = defineProps({
    value: Array,
    allowClear: {
        type: Boolean,
        default: true,
    },
    placeholder: {
        type: String,
        default: '请选择',
    },
    options: {
        type: [Object, Array],
        default: [],
    },
})
const state = reactive({
    value: undefined,
    options: [],
})

watch(
    () => props,
    (newVal, oldVal) => {
        if (!XEUtils.isArray(newVal.value)) {
            state.value = undefined
        } else {
            state.value = newVal.value
        }
        //options可传入数据源或ajax请求
        if (newVal.options) {
            if (!XEUtils.isArray(newVal.options)) {
                axios.get(newVal.options.url, newVal.options.params).then(res => {
                    if (res.success) {
                        if (XEUtils.isArray(res.data)) {
                            res.data.forEach(element => {
                                element.label = element[newVal.options.label]
                                element.value = element[newVal.options.value]
                            })
                            state.options = XEUtils.clone(res.data, true)
                        } else {
                            if (res.data.content && res.data.content.length) {
                                res.data.content.forEach(element => {
                                    element.label = element[newVal.options.label]
                                    element.value = element[newVal.options.value]
                                })
                            }
                            state.options = XEUtils.clone(res.data.content, true)
                        }
                    }
                })
            } else {
                if (newVal.options && newVal.options.length) {
                    state.options = XEUtils.clone(newVal.options, true)
                }
            }
        }
    },
    { deep: true, immediate: true }
)
const inputVal = (val, item) => {
    if (item.length === 0) {
        emits('update:value', undefined)
    } else {
        let newArr = new Array()
        item.forEach(element => {
            newArr.push({
                label: element.label,
                value: element.value,
            })
        })
        emits('update:value', state.value)
    }
    emits('change', item)
}
const filterOption = (input, option) => {
    let key = null
    state.options.forEach(element => {
        if (element.label.indexOf(input) > -1) {
            if (option.value.indexOf(element.value) > -1) {
                key = option.value
            }
        }
    })
    return key
}

defineExpose({})
const { value, options } = toRefs(state)
</script>
